<template>
  <div class="text-data-category page-container">
    <div class="bg">
      <div class="module-container">
        <div class="module-header">
          <icon name="file-alt" class="header-icon"></icon>
          <span class="header-title">学生文本上传与筛选</span>
        </div>
        <div class="module-content">
          <dv-border-box-12 class="content-box">
            <div class="content-wrapper">
              <!-- 文本筛选区域 -->
              <div class="filter-section">
                <h3 class="section-title">文本筛选</h3>
                <div class="filter-form">
                  <div class="filter-row">
                    <div class="filter-item">
                      <label>单位</label>
                      <el-select v-model="filterForm.unit" placeholder="自动筛选/选择" clearable>
                        <el-option v-for="item in unitOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                    </div>
                    <div class="filter-item">
                      <label>班级</label>
                      <el-select v-model="filterForm.class" placeholder="自动筛选/选择" clearable>
                        <el-option v-for="item in classOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                    </div>
                    <div class="filter-item">
                      <label>学号</label>
                      <el-select v-model="filterForm.studentId" placeholder="自动筛选/选择" clearable>
                        <el-option v-for="item in studentIdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                    </div>
                    <div class="filter-item">
                      <label>专业</label>
                      <el-select v-model="filterForm.major" placeholder="包装工程" clearable>
                        <el-option v-for="item in majorOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                    </div>
                    <div class="filter-item">
                      <label>姓名</label>
                      <el-input v-model="filterForm.name" placeholder="输入"></el-input>
                    </div>
                  </div>
                  <div class="filter-row">
                    <div class="filter-item">
                      <label>文本写作时间</label>
                      <el-date-picker v-model="filterForm.createTime" type="date" placeholder="年/月/日"></el-date-picker>
                    </div>
                    <div class="filter-item">
                      <label>文本写作主题</label>
                      <el-select v-model="filterForm.theme" placeholder="普通日记" clearable>
                        <el-option v-for="item in themeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                    </div>
                    <div class="filter-item filter-action">
                      <el-button type="primary" @click="handleFilter">筛选</el-button>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 文本上传处理区域 -->
              <div class="upload-section">
                <h3 class="section-title">文本上传处理</h3>
                <div class="upload-content">
                  <p>选择并上传的文本数据文件</p>
                  <div class="upload-buttons">
                    <el-upload
                      class="upload-component"
                      action="#"
                      :http-request="handleFileUpload"
                      :before-upload="beforeUpload"
                      :on-change="handleFileChange"
                      :show-file-list="false"
                      :multiple="false"
                      accept=".txt,.doc,.docx,.pdf"
                    >
                      <div class="upload-btn-group">
                        <el-button size="small">选择文件</el-button>
                        <el-button size="small" type="primary">文件上传</el-button>
                        <el-button size="small" type="primary">文件解析</el-button>
                      </div>
                    </el-upload>
                  </div>
                </div>

                <!-- 文本数据常用提示词结果预览 -->
                <div class="analysis-results">
                  <h4>文本数据常用提示词结果预览</h4>
                  <div class="result-table">
                    <table>
                      <thead>
                        <tr>
                          <th>情感分析</th>
                          <th>选择</th>
                          <th>修改</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>情感分析</td>
                          <td class="center-align"><el-radio v-model="selectedAnalysis" label="sentiment">选择</el-radio></td>
                          <td class="center-align"><el-button size="mini" type="primary">修改</el-button></td>
                        </tr>
                        <tr>
                          <td>主题分析</td>
                          <td class="center-align"><el-radio v-model="selectedAnalysis" label="theme">选择</el-radio></td>
                          <td class="center-align"><el-button size="mini" type="primary">修改</el-button></td>
                        </tr>
                        <tr>
                          <td>关键词提取</td>
                          <td class="center-align"><el-radio v-model="selectedAnalysis" label="keywords">选择</el-radio></td>
                          <td class="center-align"><el-button size="mini" type="primary">修改</el-button></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  <!-- 结果显示区域 -->
                  <div class="result-display">
                    <div class="result-header">
                      <div class="header-text">测试人：匿名 - 提示词</div>
                    </div>
                    <div class="result-content">
                      <div v-if="selectedAnalysis === 'sentiment'" class="result-item">
                        <p v-if="analysisResults.sentiment" v-html="analysisResults.sentiment"></p>
                        <p v-else>请上传文本文件并选择情感分析选项进行分析</p>
                      </div>
                      <div v-if="selectedAnalysis === 'theme'" class="result-item">
                        <p v-if="analysisResults.theme" v-html="analysisResults.theme"></p>
                        <p v-else>请上传文本文件并选择主题分析选项进行分析</p>
                      </div>
                      <div v-if="selectedAnalysis === 'keywords'" class="result-item">
                        <div v-if="analysisResults.keywords" class="keyword-cloud">
                          <div v-for="(keyword, index) in analysisResults.keywordList" :key="index"
                            class="keyword-item" :style="{ fontSize: (keyword.weight * 3 + 12) + 'px' }">
                            {{ keyword.text }}
                          </div>
                        </div>
                        <p v-else>请上传文本文件并选择关键词提取选项进行分析</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 右侧功能选项 -->
              <div class="options-sidebar">
                <div class="option-card">
                  <div class="option-item">
                    <el-checkbox v-model="options.extractStructured">提取结构化数据并填充至原有表单</el-checkbox>
                  </div>
                  <div class="option-item">
                    <el-checkbox v-model="options.saveToDatabase">保存文件至数据库</el-checkbox>
                  </div>
                  <div class="option-item">
                    <el-checkbox v-model="options.extractKeywords">提取结构化数据并生成关键字</el-checkbox>
                    <div class="option-input">
                      <el-input type="textarea" v-model="options.keywordsText" placeholder="请输入关键字"></el-input>
                      <div class="option-buttons">
                        <el-button size="small">确认</el-button>
                        <el-button size="small">删除</el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-12>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin"

export default {
  mixins: [drawMixin],
  name: 'TextDataCategory',
  data() {
    return {
      // 筛选表单
      filterForm: {
        unit: '',
        class: '',
        studentId: '',
        major: '',
        name: '',
        createTime: '',
        theme: ''
      },

      // 选项数据
      unitOptions: [
        { value: '计算机学院', label: '计算机学院' },
        { value: '机械工程学院', label: '机械工程学院' },
        { value: '电子信息学院', label: '电子信息学院' }
      ],
      classOptions: [
        { value: '计算机2101', label: '计算机2101' },
        { value: '计算机2102', label: '计算机2102' },
        { value: '软件工程2101', label: '软件工程2101' }
      ],
      studentIdOptions: [
        { value: '2021001', label: '2021001' },
        { value: '2021002', label: '2021002' },
        { value: '2021003', label: '2021003' }
      ],
      majorOptions: [
        { value: '计算机科学与技术', label: '计算机科学与技术' },
        { value: '软件工程', label: '软件工程' },
        { value: '人工智能', label: '人工智能' },
        { value: '包装工程', label: '包装工程' }
      ],
      themeOptions: [
        { value: '普通日记', label: '普通日记' },
        { value: '学习心得', label: '学习心得' },
        { value: '思想汇报', label: '思想汇报' },
        { value: '实践总结', label: '实践总结' }
      ],

      // 上传相关
      uploadedFile: null,
      uploadProgress: 0,

      // 分析相关
      selectedAnalysis: 'sentiment', // 当前选中的分析类型
      analyzing: false,

      // 分析结果
      analysisResults: {
        sentiment: '',
        keywords: '',
        summary: '',
        theme: '',
        keywordList: []
      },

      // 右侧选项
      options: {
        extractStructured: true,
        saveToDatabase: true,
        extractKeywords: false,
        keywordsText: ''
      }
    }
  },
  methods: {
    // 导航方法
    goBack() {
      this.$router.push('/unstructured-data');
    },

    refreshData() {
      this.$message.success('数据已刷新');
      // 实际项目中应该调用API重新获取数据
    },

    // 筛选方法
    handleFilter() {
      // 这里应该调用后端API进行筛选
      // 示例API调用:
      // this.$unstructuredapi.filterTextFiles(this.filterForm).then(res => {
      //   // 处理返回结果
      // }).catch(err => {
      //   this.$message.error('筛选失败: ' + err.message);
      // });

      // 跳转到筛选结果页面
      this.$router.push({
        path: '/text-data-results',
        query: this.filterForm
      });
    },

    // 文件上传相关方法
    beforeUpload(file) {
      const isValidType = ['.txt', '.doc', '.docx', '.pdf'].some(ext => {
        return file.name.toLowerCase().endsWith(ext);
      });

      if (!isValidType) {
        this.$message.error('只能上传TXT、DOC、DOCX或PDF文件!');
        return false;
      }

      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error('文件大小不能超过10MB!');
        return false;
      }

      return true;
    },

    handleFileChange(file) {
      if (file && file.raw) {
        this.uploadedFile = file.raw;
      }
    },

    handleFileUpload(options) {
      const { file } = options;
      this.uploadedFile = file;

      // 实际项目中应该调用API上传文件
      // const formData = new FormData();
      // formData.append('file', file);
      //
      // return this.$unstructuredapi.uploadTextFile(formData).then(res => {
      //   this.$message.success('文件上传成功');
      //   this.uploadedFile = {
      //     ...file,
      //     id: res.data.fileId
      //   };
      //   options.onSuccess(res);
      // }).catch(err => {
      //   this.$message.error('文件上传失败: ' + err.message);
      //   options.onError(err);
      // });

      // 模拟上传成功
      setTimeout(() => {
        this.$message.success('文件上传成功');
      }, 1000);
    },

    removeFile() {
      this.uploadedFile = null;
      this.$message.success('文件已移除');
    },

    // 文本分析方法
    handleTextAnalysis() {
      if (!this.uploadedFile) {
        this.$message.warning('请先上传文本文件');
        return;
      }

      if (this.analysisTypes.length === 0) {
        this.$message.warning('请至少选择一种分析类型');
        return;
      }

      this.analyzing = true;

      // 实际项目中应该调用API进行分析
      // const params = {
      //   fileId: this.uploadedFile.id,
      //   analysisTypes: this.analysisTypes
      // };
      //
      // this.$unstructuredapi.analyzeTextFile(params).then(res => {
      //   this.analysisResults = res.data;
      //   this.analyzing = false;
      //   this.$message.success('分析完成');
      // }).catch(err => {
      //   this.analyzing = false;
      //   this.$message.error('分析失败: ' + err.message);
      // });

      // 模拟分析过程
      setTimeout(() => {
        this.analysisResults = this.getMockAnalysisResults();
        this.analyzing = false;
        this.$message.success('分析完成');
      }, 2000);
    },

    handleTextExtract() {
      if (!this.uploadedFile) {
        this.$message.warning('请先上传文本文件');
        return;
      }

      this.$message.success('文本提取成功');
      // 实际项目中应该调用API进行文本提取
    },

    // 模拟分析结果数据，实际项目中应该从API获取
    getMockAnalysisResults() {
      return {
        sentiment: '整体情感倾向：<span style="color: #67C23A">积极</span><br>情感分布：积极 70%，中性 25%，消极 5%<br>关键情感点：学习进度讨论时情绪较为积极，对未来规划充满期待。',
        keywords: '关键词分析结果',
        summary: '本文主要讨论了学习计划和未来职业规划。作者表达了对专业知识学习的热情，以及对未来就业方向的思考。文中提到了编程技能的重要性，以及参加实习和项目实践的必要性。整体来看，作者态度积极，对未来充满期待。',
        theme: '主要议题：学习计划<br>次要议题：职业规划、技能培养<br>核心关注点：如何提升专业技能并为就业做准备',
        keywordList: [
          { text: '学习计划', weight: 5 },
          { text: '职业规划', weight: 4.5 },
          { text: '编程技能', weight: 4 },
          { text: '实习', weight: 3.5 },
          { text: '项目实践', weight: 3 },
          { text: '就业方向', weight: 2.5 },
          { text: '专业知识', weight: 2 },
          { text: '学习热情', weight: 1.5 },
          { text: '未来', weight: 1 },
          { text: '期待', weight: 1 }
        ]
      };
    }
  },
  mounted() {
    // 触发重新计算大屏缩放比例
    setTimeout(() => {
      this.calcRate()
    }, 100)
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/common.scss';

.text-data-category {
  .module-container {
    height: 100%;
    display: flex;
    flex-direction: column;

    .module-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .header-icon {
        font-size: 24px;
        color: #68d8fe;
        margin-right: 10px;
      }

      .header-title {
        font-size: 22px;
        font-weight: bold;
        color: #68d8fe;
      }
    }

    .module-content {
      flex: 1;

      .content-box {
        height: 100%;
        padding: 20px;
      }

      .content-wrapper {
        height: 100%;
        display: grid;
        grid-template-columns: 3fr 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
          "filter options"
          "upload options";
        gap: 20px;
        color: #d3d6dd;

        .filter-section {
          grid-area: filter;

          .section-title {
            font-size: 18px;
            margin-bottom: 15px;
            color: #68d8fe;
          }

          .filter-form {
            background-color: rgba(6, 30, 93, 0.5);
            border-radius: 5px;
            padding: 15px;

            .filter-row {
              display: flex;
              flex-wrap: wrap;
              gap: 15px;
              margin-bottom: 15px;

              &:last-child {
                margin-bottom: 0;
              }
            }

            .filter-item {
              flex: 1;
              min-width: 180px;

              label {
                display: block;
                margin-bottom: 5px;
                font-size: 14px;
              }

              &.filter-action {
                display: flex;
                align-items: flex-end;
                justify-content: flex-end;
              }
            }
          }
        }

        .upload-section {
          grid-area: upload;

          .section-title {
            font-size: 18px;
            margin-bottom: 15px;
            color: #68d8fe;
          }

          .upload-content {
            background-color: rgba(6, 30, 93, 0.5);
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 20px;

            p {
              margin-bottom: 10px;
            }

            .upload-buttons {
              display: flex;
              justify-content: center;

              .upload-btn-group {
                display: flex;
                gap: 10px;
              }
            }
          }

          .analysis-results {
            background-color: rgba(6, 30, 93, 0.5);
            border-radius: 5px;
            padding: 15px;

            h4 {
              margin-bottom: 15px;
              font-size: 16px;
              color: #68d8fe;
            }

            .result-table {
              margin-bottom: 20px;

              table {
                width: 100%;
                border-collapse: collapse;

                th, td {
                  padding: 8px 12px;
                  border: 1px solid rgba(104, 216, 254, 0.3);
                }

                th {
                  background-color: rgba(104, 216, 254, 0.1);
                  color: #68d8fe;
                  text-align: left;
                }

                .center-align {
                  text-align: center;
                }
              }
            }

            .result-display {
              border: 1px solid rgba(104, 216, 254, 0.3);
              border-radius: 4px;

              .result-header {
                background-color: rgba(104, 216, 254, 0.1);
                padding: 8px 12px;
                border-bottom: 1px solid rgba(104, 216, 254, 0.3);

                .header-text {
                  color: #d3d6dd;
                  font-size: 14px;
                }
              }

              .result-content {
                min-height: 150px;
                padding: 15px;
                background-color: rgba(255, 255, 255, 0.05);

                .result-item {
                  p {
                    margin-bottom: 10px;
                    line-height: 1.6;
                  }
                }

                .keyword-cloud {
                  display: flex;
                  flex-wrap: wrap;
                  justify-content: center;
                  align-items: center;
                  gap: 10px;
                  padding: 15px;

                  .keyword-item {
                    color: #68d8fe;
                    padding: 5px;
                    border-radius: 4px;
                    background-color: rgba(104, 216, 254, 0.1);
                    transition: all 0.3s;

                    &:hover {
                      background-color: rgba(104, 216, 254, 0.3);
                      transform: scale(1.05);
                    }
                  }
                }
              }
            }
          }
        }

        .options-sidebar {
          grid-area: options;

          .option-card {
            background-color: rgba(6, 30, 93, 0.5);
            border-radius: 5px;
            padding: 15px;

            .option-item {
              margin-bottom: 15px;

              &:last-child {
                margin-bottom: 0;
              }

              .option-input {
                margin-top: 10px;
                margin-left: 24px;

                .el-textarea {
                  margin-bottom: 10px;
                }

                .option-buttons {
                  display: flex;
                  justify-content: flex-end;
                  gap: 10px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
